<template>
  <div class="site">
    <div class="dingdantitle">
      <van-nav-bar
        title="地址"
        :left-text="'返回'"
        @click-left="back"
        fixed
      ></van-nav-bar>
    </div>
    <van-address-list
      :switchable="cheak"
      v-model="chosenAddressId"
      :list="list"
      default-tag-text="默认"
      @add="onadd"
      @edit="onedit"
    />
    <van-popup v-model="show">
      <van-address-edit
        show-postal
        show-set-default
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        :area-list="areaList"
        :address-info="addressInfo"
        @save="newAddress"
      />
    </van-popup>

    <van-popup v-model="setshow">
      <van-address-edit
        show-postal
        show-delete
        show-set-default
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        :area-list="areaList"
        :address-info="addressInfo"
        @save="setAddress"
        @delete="deleteAddress"
      />
    </van-popup>
  </div>
</template>

<script>
import { areaList } from '@vant/area-data'
import { getToken } from '@/utils/storage'
// import { Dialog } from 'vant'

import {
  findAddressAPI,
  editAddressAPI,
  deleteAddressAPI,
  addAddressAPI
} from '@/api/user'
export default {
  data () {
    return {
      // 是否显示无订单框
      chosenAddressId: '1',
      isshow: false,
      show: false,
      cheak: false,
      setshow: false,
      // 商品号
      sids: '',
      // 商品列表
      resultdata: {},
      // 订单总价格
      sum: 0,
      areaList,
      // 地址数据初始值
      addressInfo: {
        id: '',
        name: '',
        tel: '',
        province: '',
        city: '',
        county: '',
        addressDetail: '',
        areaCode: '',
        postalCode: '',
        isDefault: false
      },
      list: [],
      // 选择的地址
      selectaddress: {},
      // 地址
      address: ''
    }
  },
  created () {
    this.each()
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    // 查询地址列表
    async each () {
      // 获取token，如果没有则去登录页面
      const tokenString = getToken()
      if (!tokenString) return this.$router.push({ name: 'Login' })
      const res = await findAddressAPI({
        appkey: this.$store.state.appkey,
        tokenString
      })
      if (res) {
        res.result.forEach(v => {
          if (v.isDefault) {
            this.selectaddress = v
            this.address = v.city + v.county + v.addressDetail
          }
        })
        this.list = res.result
      }
    },
    // 弹出编辑地址框
    onedit (item) {
      this.setshow = !this.setshow
      this.addressInfo = item
    },
    // 编辑地址
    setAddress (address) {
      const content = Object.assign({}, address)
      const tokenString = getToken()
      delete content.id
      delete content.country
      content.isDefault = Number(content.isDefault)
      content.appkey = this.$store.state.appkey
      content.tokenString = tokenString
      content.aid = this.addressInfo.aid
      editAddressAPI(content).then(res => {
        this.each() // 重新渲染地址列表
      })
    },
    // 新增地址
    onadd () {
      this.show = !this.show
      //  初始化
      this.addressInfo = {
        id: '',
        name: '',
        tel: '',
        province: '',
        city: '',
        county: '',
        addressDetail: '',
        areaCode: '',
        postalCode: '',
        isDefault: false
      }
    },
    // 增加新的地址
    newAddress (address) {
      const content = Object.assign({}, address)
      delete content.id
      delete content.country
      content.isDefault = Number(content.isDefault)
      content.appkey = this.$store.state.appkey
      content.tokenString = getToken()
      addAddressAPI(content).then(res => {
        this.each()
        this.show = false
      })
    },
    // 删除地址
    deleteAddress (address) {
      if (!address.aid) {
        return
      }
      const tokenString = getToken()
      deleteAddressAPI({
        appkey: this.$store.state.appkey,
        tokenString,
        aid: address.aid
      }).then(res => {
        this.addressInfo = {
          id: '',
          name: '',
          tel: '',
          province: '',
          city: '',
          county: '',
          addressDetail: '',
          areaCode: '',
          postalCode: '',
          isDefault: false
        }
        this.each()
        this.show = false
        this.setshow = false
      })
    }
  }
}
</script>

<style lang="less" scoped>
.site {
  min-height: 100vh;
  background-color: #f1f3f4;
  box-sizing: border-box;
  padding: 10px;
  padding-top: 46px;
  /deep/ .van-popup {
    min-width: 100%;
  }
  /deep/ .van-address-list__bottom {
    background-color: #f1f3f4;
  }
}
</style>
